<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header/>

    <main>
      <h2 class="page-title">MES 事件配置</h2>

      <div class="event-grid">
<!--        <div class="event-card" @click="navigateToEventConfig('PrintSN')">-->
<!--          <div class="event-info">-->
<!--            <span class="event-icon"><i class="fas fa-print"></i></span>-->
<!--            <div class="event-details">-->
<!--              <span class="event-name">PrintSN</span>-->
<!--              <p class="event-description">打码程序单穴使用</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>-->
<!--        </div>-->

        <div class="event-card" @click="navigateToEventConfig('SN_CheckIN')">
          <div class="event-info">
            <span class="event-icon"><i class="fas fa-sign-in-alt"></i></span>
            <div class="event-details">
              <span class="event-name">SN_CheckIN</span>
              <p class="event-description">产品进站核对</p>
            </div>
          </div>
          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>
        </div>

        <div class="event-card" @click="navigateToEventConfig('SN_Checkout')">
          <div class="event-info">
            <span class="event-icon"><i class="fas fa-sign-out-alt"></i></span>
            <div class="event-details">
              <span class="event-name">SN_Checkout</span>
              <p class="event-description">出站记录产品信息</p>
            </div>
          </div>
          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>
        </div>

<!--        <div class="event-card" @click="navigateToEventConfig('Link_Comp')">-->
<!--          <div class="event-info">-->
<!--            <span class="event-icon"><i class="fas fa-link"></i></span>-->
<!--            <div class="event-details">-->
<!--              <span class="event-name">Link_Comp</span>-->
<!--              <p class="event-description">Link或核对材料</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>-->
<!--        </div>-->

        <div class="event-card" @click="navigateToEventConfig('Status')">
          <div class="event-info">
            <span class="event-icon"><i class="fas fa-heartbeat"></i></span>
            <div class="event-details">
              <span class="event-name">Status</span>
              <p class="event-description">机台状态及停机code上报</p>
            </div>
          </div>
          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>
        </div>

        <div class="event-card" @click="navigateToEventConfig('Alarm')">
          <div class="event-info">
            <span class="event-icon"><i class="fas fa-exclamation-triangle"></i></span>
            <div class="event-details">
              <span class="event-name">Alarm</span>
              <p class="event-description">机台未停机报警ID上报</p>
            </div>
          </div>
          <span class="event-arrow"><i class="fas fa-chevron-right"></i></span>
        </div>

      </div>
    </main>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import {useRouter} from 'vue-router'; // 导入 useRouter
// 导入 Header 组件 (请根据实际路径调整)
// 假设 AppHeader.vue 已经存在且配置正确



const router = useRouter(); // 获取路由实例

// --- 方法 ---

// 导航到具体的事件配置页面
const navigateToEventConfig = (eventName) => {
  console.log(`Navigating to event config page: ${eventName}`);
  // 定义事件名与路由路径的映射关系
  // 你需要根据你的实际路由配置来修改这些路径
  const routeMap = {
    'PrintSN': '/settings/event-config-nav/print_sn',
    'SN_CheckIN': '/settings/event-config-nav/sn_check_in',
    'SN_Checkout': '/settings/event-config-nav/sn_check_out',
    'Link_Comp': '/settings/event-config-nav/link_comp',
    'Status': '/settings/event-config-nav/status',
    'Alarm': '/settings/event-config-nav/alarm'
  };

  const targetRoute = routeMap[eventName];

  if (targetRoute) {
    // 使用 router.push 进行路由跳转
    router.push(targetRoute);

    // 原始 HTML 有卡片点击的动画效果，这里在 CSS 中通过 :hover 保留了部分效果。
    // 如果需要更复杂的点击瞬时动画，可以在点击时添加/移除类，并结合 CSS transition。
  } else {
    console.error(`未知事件类型: ${eventName}`);
    // 可以显示一个错误通知
  }
};


// --- 生命周期钩子 ---
onMounted(() => {
  console.log('Event Config Navigation Page mounted');
  // 页面加载后可能需要执行一些初始化，但对于导航页通常不需要
});

onUnmounted(() => {
  console.log('Event Config Navigation Page unmounting');
  // 清理可能的定时器或事件监听 (对于导航页通常没有)
});

// ESC键返回功能可以通过 Vue Router 的 beforeEach 或组件内部监听实现
// 如果需要在单个组件内实现ESC返回，可以在 mounted 中添加监听，在 unmounted 中移除
onMounted(() => {
  const handleEscape = (event) => {
    if (event.key === 'Escape') {
      router.back(); // 使用 router.back() 返回上一页
    }
  };
  document.addEventListener('keydown', handleEscape);
  onUnmounted(() => {
    document.removeEventListener('keydown', handleEscape);
  });
});

</script>

<style scoped>
/* --- 将原始 HTML 文件中的所有自定义样式复制到这里 --- */

/* --- Inherited Styles & Color Palette --- */
/* 根变量通常在全局 CSS 中定义，但为了完整性，这里列出 */
/* :root {
  --bg-primary: #f3f4f6;
  --bg-secondary: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --accent-blue: #3b82f6;
  --status-green: #22c55e;
  --status-yellow: #eab308;
  --status-red: #ef4444;
  --status-gray: #6b7280;
  --status-off: #9ca3af;
  --online-green: #10b981;
  --offline-red: #f43f5e;
} */

/* body 样式通常由父组件或全局 App.vue 控制 */
/* body {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
} */

/* --- Header (Consistent) --- */
/* Header 样式已移至 AppHeader.vue 或全局 */


/* --- Main Content Area --- */
main {
  flex-grow: 1;
  padding: 1.5rem; /* p-6 */
  overflow-y: auto; /* Enable scrolling for list */
}

.page-title {
  font-size: 1.25rem; /* Larger title */
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* --- Event List/Grid --- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
  gap: 1rem;
  max-width: 1000px; /* Limit overall width */
  margin: 0 auto; /* Center grid */
}

.event-card {
  background-color: var(--bg-secondary);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  padding: 1rem 1.25rem; /* p-4 px-5 */
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center; /* Align icon and text */
  justify-content: space-between; /* Space out content and arrow */
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.07), 0 2px 4px -3px rgba(0, 0, 0, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  border-color: var(--accent-blue);
}

.event-info {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* space-x-3 */
}

.event-icon {
  font-size: 1.25rem; /* text-xl */
  color: var(--accent-blue);
  width: 32px; /* Fixed width for alignment */
  text-align: center;
}

.event-details {
  display: flex;
  flex-direction: column;
}

.event-name {
  font-size: 0.9rem; /* text-sm */
  font-weight: 600;
  color: var(--text-primary);
}

.event-description {
  font-size: 0.7rem; /* text-xs */
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.event-arrow i {
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}

.event-card:hover .event-arrow i {
  color: var(--accent-blue);
}

/* Original body inline styles - Should be managed in App.vue or layout */
/* body[style="max-width: 800px; max-height: 600px; margin: auto;"] */
/* Remove or adapt these in your App.vue or main layout component */


</style>
